<template>
  <div :class="[modelName,'container-fluid']" >
    <el-menu :router="true" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/home" route="/home" >首页</el-menu-item>
        <el-menu-item index="/my_blog" route="/my_blog">我的博客</el-menu-item>
        <el-menu-item index="/blog" route="/blog">精选</el-menu-item>
        
        <el-submenu index="5" class="pull-right">
            <template slot="title">XXXXX</template>
            <el-menu-item index="/profile" route="/profile">个人中心</el-menu-item>
            <el-menu-item index="/message" route="/message">消息</el-menu-item>
            <el-menu-item index="/setting" route="/setting">设置</el-menu-item>
            <el-menu-item index="5-4">退出</el-menu-item>
        </el-submenu>
    </el-menu>
    <div v-if="showTag" class="search-btn" style="">
        <el-button style="margin:10px;margin-right:-10px;" circle size="small" @click="gotoWriter" icon="el-icon-edit-outline"></el-button><br/>
        <el-button style="margin:10px;margin-right:-10px;" circle size="small" icon="el-icon-search"></el-button>
    </div>
    <div v-if="showTag">
        <el-card class="box-card hot-tab" style="" shadow="never">
             <div slot="header" class="clearfix text-right" >
                 <el-button style="margin:10px;margin-right:-10px;" @click="gotoWriter" round size="medium" icon="el-icon-edit-outline">创 作</el-button><br/>
             </div>
            <el-row>
                <el-col :span="24">
                    <el-input placeholder="请输入内容" >
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    
                </el-col>
                
            </el-row>
            <div class="text-left">
                <h3>热门标签</h3>
                <hr/>
                <div>
                    <el-tag size="small" type="info">标签三csdbjsdh</el-tag>
                    <el-tag size="small" type="info">标签三</el-tag>
                    <el-tag size="small" type="info">标签三</el-tag>
                    <el-tag size="small" type="info">标签三</el-tag>
                    <el-tag size="small" type="info">标签三</el-tag>
                </div>
            </div>
        </el-card>
    </div>
  </div>
</template>

<script>
export default {

    data () {
        return {
            'modelName':'header',
            'activeIndex':'/home'
        }
    },
    mounted(){ this.init(); },
    computed:{
        'showTag':function(){
            return this.$route.path == '/home' || this.$route.path == '/my_blog' ||  this.$route.path == '/blog';
        }
    },
    methods: {
        init(){
            this.activeIndex = this.$route.path
        },
        handleSelect(index,path){

        },
        gotoWriter(){
            this.$router.push({
                name:"Write"
            });
        }
    }
}
</script>

<style>

</style>
